<template>
  <div class="login">
    <Header /> <!-- 引入Header组件 -->
    <div class="container mt-5">
      <h1>登录</h1>
      <form @submit.prevent="handleLogin">
        <div class="mb-3">
          <label for="username" class="form-label">用户名</label>
          <input type="text" id="username" v-model="form.username" class="form-control" required />
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" id="password" v-model="form.password" class="form-control" required />
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
      </form>
    </div>
    <Footer /> <!-- 引入Footer组件 -->
  </div>
</template>

<script>
import Header from '@/components/Header.vue'; // 导入Header组件
import Footer from '@/components/Footer.vue'; // 导入Footer组件
import { mapActions } from 'vuex'; // 导入Vuex中的mapActions

export default {
  components: {
    Header, // 注册Header组件
    Footer, // 注册Footer组件
  },
  data() {
    return {
      form: {
        username: '', // 用户名字段
        password: '', // 密码字段
      },
    };
  },
  methods: {
    ...mapActions(['login']), // 映射Vuex的login方法
    async handleLogin() {
      try {
        await this.login(this.form); // 调用login方法登录
        this.$router.push('/'); // 登录成功后跳转到主页
      } catch (error) {
        alert(`登录失败: ${error.message}`); // 登录失败时显示错误信息
      }
    },
  },
};
</script>

<style scoped>
.login {
  text-align: center; /* 设置登录页面的文本居中对齐 */
}

.container {
  max-width: 400px; /* 设置容器的最大宽度 */
  margin: 0 auto; /* 自动水平外边距以居中对齐 */
}
</style>
